<template>
	<view class="discharge">
		<view class="discharge-container">
			<HeaderNav bgcolor='rgba(255,255,255,.1)'></HeaderNav>
			<view class="top">
				<text>该产品的总重量是多少？</text>
				<view class="weight">
					<view class="ccc">*</view>
					<input class="weight-input" placeholder="Ex.: 70" :disabled=" inputEnable== 1" v-model.number="weight" />
					<view class="ttt">
						g
					</view>
				</view>
			</view>
			<view class="mid">
				<text>指出纤维和百分比(*)</text>
				<view class="mid-container">
					<view class="info-box">
						<view class="ccc">*</view>
						<view class="weight-input">
							<view class="uni-form-item uni-column">
								<picker @change="bindPickerChange" :range="array">
									<label class="" v-model="name">{{array[index]}}</label>
								</picker>
							</view>
						</view>
						<view class="ttt">
							<view class="iconfont icon-xiangxia ic"></view>
						</view>
					</view>
					<view class="info-box">
						<view class="ccc">*</view>
						<input class="weight-input" placeholder="Ex.: 80" v-model.number="percent" />
						<view class="kkk">
							%
						</view>
					</view>
					<view class="ccc">*</view>
					<view class="add" @click="add">+</view>
				</view>
			</view>
			<view class="a">
				<text>所有带*的字段为必填项</text>
			</view>
			
			<view class="list">
				<view class="list-top">
					添加
				</view>
			</view>
			<view class="list" v-for='(item, index) in listAdd' :key="index">
				<view class="list-container">
					<view class="content">
						<span>{{ item.name1 }}</span>
						<span>{{ item.percent1 }}%</span>
						<span>{{ item.res1 }}g</span>
					</view>
					<view class="del" @click="del(index)">
						<view class="iconfont icon-jianhao dd"></view>
					</view>
				</view>
			</view>
			<view class="ok" v-if="true" @click='goRes(res)'>
				运行>
			</view>
		</view>
	</view>
</template>

<script>
	import HeaderNav from '@/common/Index-Header/Index-Header'
	import comboxSearch from '@/components/cuihai-combox/cuihai-combox'
	import selectLay from '@/components/select-lay/select-lay'
	export default {
		data() {
			return {
				array: ['丝绸','聚酯','氨纶','棉花', '纤维胶', '丙烯酸', '聚酰胺', 
						'聚氨酯', '聚丙烯', '羊毛', '亚麻', '皮革', '其他面料'],
				index: 0,
				weight: '',
				name: '丝绸',
				percent: '',
				itemcount: 0,
				name1: '丝绸',
				percent1: 0,
				res1: 0,
				listAdd: [],
				inputEnable: false,
				okVisible: false,
				ss: 0,
				res: -6.60
			}
		},
		components: {
			HeaderNav,
			comboxSearch,
			selectLay
		},
		methods: {
			bindPickerChange: function(e) {		//改变的事件名
				//console.log('picker发送选择改变，携带值为', e.target.value)   用于输出改变索引值
				this.index = e.target.value			//将数组改变索引赋给定义的index变量
				this.jg=this.array[this.index]		//将array【改变索引】的值赋给定义的jg变量
				this.name=this.array[this.index]
			//	console.log("籍贯为：",this.jg)		//输出获取的籍贯值，例如：中国
			},
			add() {
				let s = 0;
				this.listAdd.forEach(function(element, index, array) {
					s += element.percent1;
				});
				console.log(s)
				if (this.percent + s > 100) {
					let tt=100-s
					uni.showToast({
						title: '百分比不能大于100',
						icon: 'none',
						duration: 2000
					})
					return
				}
				this.ss=s
				// console.log(this.s);
				// console.log(this.weight, this.name, this.percent)
				// if(this.weight==0 || this.name=='' || this.percent==0) {
				// 	uni.showToast({
				// 		title: '请填写完整信息',
				// 		icon: 'none'
				// 	})
				// }
				let obj={
					name1: this.name,
					percent1: this.percent,
					res1: 50
				}
				if(this.percent + s == 100) {
					
					this.okVisible=true
				}
				this.listAdd.push(obj),
				// console.log(this.listAdd)
				this.inputEnable=true
				this.itemcount ++
			},
			del(index) {
				this.listAdd.splice(index,1)
				if(this.listAdd.length == 0) {
					this.inputEnable=false
				}
				if(this.ss != 100) {
					this.okVisible=false
				}
			},
			goRes(res) {
				uni.navigateTo({
					url: 'res?res='+res
				})
			}
		}
	}
</script>

<style lang="less" scopee>
	.ccc {
		position: absolute;
		top: -30rpx;
		right: 0rpx;
		color: #f4ca70;
	}

	.discharge {
		width: 100vw;
		height: 100vh;
		// padding: 20rpx;
		box-sizing: border-box;
		background: linear-gradient(0deg, #021B79, #0b2997, #254dd3);

		.top {
			width: 50%;
			color: rgba(255, 255, 255, .9);
			font-size: 32rpx;
			margin: 20rpx auto;
			text-align: center;
			box-sizing: border-box;

			.weight {
				position: relative;
				background-color: #ffffff;
				margin: 30rpx;
				height: 80rpx;
				border-radius: 10rpx;
				box-sizing: border-box;

				.weight-input {
					position: absolute;
					top: 19rpx;
					left: 23rpx;
					display: inline-block;
					width: 80%;
					text-align: left;
					font-size: 37rpx;
					color: #808487;


					// border-bottom: 1px solid #000;
				}

				.ttt {
					position: absolute;
					display: inline-block;
					width: 20%;
					top: 0rpx;
					right: 0rpx;
					color: #808487;
					height: 100%;
					font-size: 40rpx;
					line-height: 80rpx;
					border-top-right-radius: 10rpx;
					border-bottom-right-radius: 10rpx;
					border-left: 1px solid #999;
					background-color: #e8ecef;

					.down {
						width: 20rpx;
						height: 20rpx;
					}
				}
			}

		}

		.mid {
			// width: 80%;
			color: rgba(255, 255, 255, .9);
			font-size: 32rpx;
			// margin: 20rpx auto;
			margin-top: 60rpx;
			text-align: center;
			box-sizing: border-box;

			.mid-container {
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				text-align: center;
				padding: 20rpx;
				box-sizing: border-box;

				.info-box {
					position: relative;
					background-color: #ffffff;
					margin-top: 30rpx;
					margin-right: 10rpx;
					height: 80rpx;
					width: 40%;
					border-radius: 10rpx;
					box-sizing: border-box;

					.weight-input {
						position: absolute;
						top: 19rpx;
						left: 23rpx;
						display: inline-block;
						width: 55%;
						text-align: left;
						font-size: 37rpx;
						color: #808487;
					}

					.ttt {
						position: absolute;
						display: inline-block;
						width: 22%;
						top: 0rpx;
						right: 0rpx;
						color: #808487;
						height: 100%;
						font-size: 40rpx;
						line-height: 80rpx;
						border-top-right-radius: 10rpx;
						border-bottom-right-radius: 10rpx;

						.ic {
							font-size: 74rpx!important;
						}
					}
					
					.kkk {
						position: absolute;
						display: inline-block;
						width: 22%;
						top: 0rpx;
						right: 0rpx;
						color: #808487;
						height: 100%;
						font-size: 40rpx;
						line-height: 80rpx;
						border-top-right-radius: 10rpx;
						border-bottom-right-radius: 10rpx;
						border-left: 1px solid #999;
						background-color: #e8ecef;
					}
				}

				.add {
					box-sizing: border-box;
					width: 15%;
					height: 80rpx;
					font-weight: 700;
					font-size: 60rpx;
					line-height: 70rpx;
					color: #808487;
					background-color: #e8ecef;
				}
			}
		}

		.a {
			margin-top: 40rpx;
			margin-bottom: 60rpx;
			text-align: center;
			color: #f4ca70;
			border-radius: 10rpx;
		}
		
		.list {
			// height: 130rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			
			.list-top {
				background-color: #ffffff;
				width: 100%;
				height: 100%;
				padding: 20rpx;
				text-align: left;
				box-sizing: border-box;
				box-sizing: 999;
				font-weight: 700;
				font-size: 37rpx;
				border-bottom: 1px solid #999;
			}
			
			.list-container {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #ffffff;
				width: 100%;
				height: 100%;
				padding: 20rpx;
				font-size: 38rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #999;
				
				.content {
					width: 50%;
					span {
						margin-right: 20rpx;
					}
					
				}
				.del {
					
					width: 20%;
					height: 60rpx;
					color: #ffffff;
					line-height: 60rpx;
					border-radius: 10rpx;
					background-color: #ca444b;
					
					.dd {
						text-align: center;
						font-weight: 700;
						font-size: 60rpx!important;
					}
				}
			}
		}
	
		.ok {
			width: 30%;
			height: 80rpx;
			color: #0a0a0a;
			margin: 40rpx auto;
			text-align: center;
			line-height: 80rpx;
			font-weight: 700;
			background-color: #e8ecef;
		}
	}
</style>
